.big-event-container {
  display: flex;


  .left-content {
    background: #ffffff;
    width: 370px;
    margin:10px 10px 10px 0;
    padding: 40px;
    height: calc(100vh - 90px);
    overflow-y: scroll;
    .timeline {
      border-left: 2px solid #E7E7E7;
      position: relative;
      .clock-img {
        position: absolute;
        top: -16px;
        left: -8px;
      }

      .item-wrap {
        .year-wrap {
          height: 60px;

          .year{
            display: inline-block;
            margin: 13px 0 0 -26px;
            width: 100px;
            height: 30px;
            text-align: center;
            line-height: 28px;
            color: #fff;
            font-size: 19px;
            font-weight: bold;
            cursor: pointer;
            &.bg-0 {
              background-image: url("../../../../assets/images/timeline/year-bg-0.png");
              background-size: 100% 100%;
              background-position: center;
              background-repeat: no-repeat;
            }

            &.bg-1 {
              background-image: url("../../../../assets/images/timeline/year-bg-1.png");
              background-size: 100% 100%;
              background-position: center;
              background-repeat: no-repeat;
            }
          }
        }


        .divider {
          position: relative;
          height:0;

          &.type0 {
            border-top: 1px solid #2095FF;
          }
          &.type1 {
            border-top: 1px solid #FF9D00;
          }
          .left-dot {
            position: absolute;
            top: -13px;
            left: -6px;
          }
          .right-dot {
            position: absolute;
            top: -13px;
            right: -8px;
            img {
              width: 8px;
            }
          }
        }
        .content {
          padding: 10px 10px;
          img {
            float: left;
            margin-right: 5px;
            margin-bottom: 5px;
          }
          .first-item {
            height: 88px;
            overflow: hidden;
          }
          .icon-0:before{
            content: "";
            display: inline-block;
            margin-right: 5px;
            width: 9px;
            height: 11px;
            background: url("../../../../assets/images/timeline/text-before-icon-0.png");
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
          }

          .icon-1:before{
            content: "";
            display: inline-block;
            margin-right: 5px;
            width: 9px;
            height: 11px;
            background: url("../../../../assets/images/timeline/text-before-icon-1.png");
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
          }
        }
      }
    }
  }

  .right-content {
    flex: 1;
    margin:10px 0 10px 0;
    background: url("../../../../assets/images/timeline/right-content-bg.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;

    .right-content-title {
      position: absolute;
      top: 10px;
      left: 30px;
      font-size: 20px;
      font-weight: bold;
    }


    .button-group {
      margin: 10px;
      text-align: right;
      padding-right: 50px;
      [nz-button] {
        width: 102px;
      }
      .btn-1 {
        border: 1px solid #317BFE;
        background: #D8E8FF;
        color: #317BFE;
      }
      .btn-2 {
        background: #34689A;
        color: #ffffff;
      }
      .btn-3 {
        background: #3199CC;
        color: #ffffff;
      }
      .btn-4 {
        background: #FF8800;
        color: #ffffff;
      }
      .btn-5 {
        background: #ff5451;
        color: #ffffff;
      }
      .btn-6 {
        color: #2F9BFF;
        font-size: 32px;
        vertical-align: bottom;
        margin-left: 20px;
        cursor: pointer;
      }
    }

    .content {
      width: 100%;
      overflow: auto;
      .pos1 {
        .month-pic {
          position: absolute;
          left: 9%;
          transform: translateX(-50%) translateY(-50%);
          background-image: url("../../../../assets/images/timeline/pos1.png");
          background-size: 100% 100%;
          background-position: center;
          background-repeat: no-repeat;
          text-align: center;
          color: #ffffff;
          cursor: pointer;
        }

        .dot {
          position: absolute;
          left: 9%;
          transform: translateX(-50%) translateY(-50%);
          border-radius: 50%;
          background: #74BDB0;
          min-width: 20px;
          min-height: 20px;
          z-index:10;
        }

        .text-wrap {
          width: 16%;
          height: 20vh;
          position: absolute;
          transform: translateX(-50%) translateY(-50%);
          top: 57%;
          left: 16.9%;
          img {
            float:left;
            height: 400px;
            z-index: 1;
          }

          .item {
            margin: 10px 0;
            .title {
              padding-left: 10px;
              color: #38B5FF;
              font-weight: bold;
            }
            .detail {
              padding-left: 25px;
            }

            .title:before{
              content: "";
              display: inline-block;
              width: 9px;
              height: 11px;
              background: url("../../../../assets/images/timeline/text-before-icon-0.png");
              background-size: 100% 100%;
              background-position: center;
              background-repeat: no-repeat;
            }
          }
        }

        &.type1 {
          .month-pic {
            width: 14.4vh;
            height: 13.5vh;
            top: 35%;
            font-size: 6vh;
            line-height: 10.6vh;
          }
          .dot {
            top: 44.6%;
            width: 3.7vh;
            height: 3.7vh;
          }
        }

        &.type2 {
          .month-pic {
            width: 10vh;
            height: 9.5vh;
            top: 38%;
            font-size: 4vh;
            line-height: 7.6vh;
          }
          .dot {
            top: 44.6%;
            left: 9%;
            width: 2.5vh;
            height: 2.5vh;
          }
        }

        &.type3 {
          .month-pic {
            width: 6vh;
            height: 5.7vh;
            top: 40%;
            font-size: 2.2vh;
            line-height: 5vh;
          }
          .dot {
            top: 44.6%;
            width: 2vh;
            height: 2vh;
          }
        }
      }

      .pos2 {
        .month-pic {
          position: absolute;
          left: 27%;
          transform: translateX(-50%) translateY(-50%);
          background-image: url("../../../../assets/images/timeline/pos2.png");
          background-size: 100% 100%;
          background-position: center;
          background-repeat: no-repeat;
          text-align: center;
          color: #ffffff;
          cursor: pointer;
        }

        .dot {
          position: absolute;
          left: 27%;
          transform: translateX(-50%) translateY(-50%);
          border-radius: 50%;
          background: #6699CA;
          min-width: 20px;
          min-height: 20px;
          z-index:10;
        }

        .text-wrap {
          width: 16%;
          height: 20vh;
          position: absolute;
          transform: translateX(-50%) translateY(-50%);
          top: 57%;
          left: 35%;
          img {
            float:left;
            height: 400px;
            z-index: 1;
          }

          .item {
            margin: 10px 0;
            .title {
              padding-left: 10px;
              color: #38B5FF;
              font-weight: bold;
            }
            .detail {
              padding-left: 25px;
            }

            .title:before{
              content: "";
              display: inline-block;
              width: 9px;
              height: 11px;
              background: url("../../../../assets/images/timeline/text-before-icon-0.png");
              background-size: 100% 100%;
              background-position: center;
              background-repeat: no-repeat;
            }
          }
        }

        &.type1 {
          .month-pic {
            width: 14.4vh;
            height: 13.5vh;
            top: 35%;
            font-size: 6vh;
            line-height: 10.6vh;
          }
          .dot {
            top: 44.6%;
            width: 3.7vh;
            height: 3.7vh;
          }
        }

        &.type2 {
          .month-pic {
            width: 10vh;
            height: 9.5vh;
            top: 38%;
            font-size: 4vh;
            line-height: 7.6vh;
          }
          .dot {
            top: 44.6%;
            width: 2.5vh;
            height: 2.5vh;
          }
        }

        &.type3 {
          .month-pic {
            width: 6vh;
            height: 5.7vh;
            top: 40%;
            font-size: 2.2vh;
            line-height: 5vh;
          }
          .dot {
            top: 44.6%;
            width: 2vh;
            height: 2vh;
          }
        }
      }

      .pos3 {
        .month-pic {
          position: absolute;
          left: 45%;
          transform: translateX(-50%) translateY(-50%);
          background-image: url("../../../../assets/images/timeline/pos3.png");
          background-size: 100% 100%;
          background-position: center;
          background-repeat: no-repeat;
          text-align: center;
          color: #ffffff;
          cursor: pointer;
        }

        .dot {
          position: absolute;
          left: 45%;
          transform: translateX(-50%) translateY(-50%);
          border-radius: 50%;
          background: #FF9D00;
          min-width: 20px;
          min-height: 20px;
          z-index:10;
        }

        .text-wrap {
          width: 16%;
          height: 20vh;
          position: absolute;
          transform: translateX(-50%) translateY(-50%);
          top: 57%;
          left: 53%;
          img {
            float:left;
            height: 400px;
            z-index: 1;
          }

          .item {
            margin: 10px 0;
            .title {
              padding-left: 10px;
              color: #38B5FF;
              font-weight: bold;
            }
            .detail {
              padding-left: 25px;
            }

            .title:before{
              content: "";
              display: inline-block;
              width: 9px;
              height: 11px;
              background: url("../../../../assets/images/timeline/text-before-icon-0.png");
              background-size: 100% 100%;
              background-position: center;
              background-repeat: no-repeat;
            }
          }
        }

        &.type1 {
          .month-pic {
            width: 14.4vh;
            height: 13.5vh;
            top: 35%;
            font-size: 6vh;
            line-height: 10.6vh;
          }
          .dot {
            top: 44.6%;
            width: 3.7vh;
            height: 3.7vh;
          }
        }

        &.type2 {
          .month-pic {
            width: 10vh;
            height: 9.5vh;
            top: 38%;
            font-size: 4vh;
            line-height: 7.6vh;
          }
          .dot {
            top: 44.6%;
            width: 2.5vh;
            height: 2.5vh;
          }
        }

        &.type3 {
          .month-pic {
            width: 6vh;
            height: 5.7vh;
            top: 40%;
            font-size: 2.2vh;
            line-height: 5vh;
          }
          .dot {
            top: 44.6%;
            width: 2vh;
            height: 2vh;
          }
        }
      }

      .pos4 {
         .month-pic {
           position: absolute;
           left: 64%;
           transform: translateX(-50%) translateY(-50%);
           background-image: url("../../../../assets/images/timeline/pos4.png");
           background-size: 100% 100%;
           background-position: center;
           background-repeat: no-repeat;
           text-align: center;
           color: #ffffff;
           cursor: pointer;
         }

         .dot {
           position: absolute;
           left: 64%;
           transform: translateX(-50%) translateY(-50%);
           border-radius: 50%;
           background: #0099CE;
           min-width: 20px;
           min-height: 20px;
           z-index:10;
         }

         .text-wrap {
           width: 16%;
           height: 20vh;
           position: absolute;
           transform: translateX(-50%) translateY(-50%);
           top: 46%;
           left: 72%;
           img {
             float:left;
             height: 400px;
             z-index: 1;
           }

           .item {
             margin: 10px 0;
             .title {
               padding-left: 10px;
               color: #38B5FF;
               font-weight: bold;
             }
             .detail {
               padding-left: 25px;
             }

             .title:before{
               content: "";
               display: inline-block;
               width: 9px;
               height: 11px;
               background: url("../../../../assets/images/timeline/text-before-icon-0.png");
               background-size: 100% 100%;
               background-position: center;
               background-repeat: no-repeat;
             }
           }
         }

         &.type1 {
           .month-pic {
             width: 14.4vh;
             height: 13.5vh;
             top: 25%;
             font-size: 6vh;
             line-height: 10.6vh;
           }
           .dot {
             top:34.6%;
             width: 3.7vh;
             height: 3.7vh;
           }
         }

         &.type2 {
           .month-pic {
             width: 10vh;
             height: 9.5vh;
             top: 28%;
             font-size: 4vh;
             line-height: 7.6vh;
           }
           .dot {
             top: 34.6%;
             width: 2.5vh;
             height: 2.5vh;
           }
         }

         &.type3 {
           .month-pic {
             width: 6vh;
             height: 5.7vh;
             top: 30%;
             font-size: 2.2vh;
             line-height: 5vh;
           }
           .dot {
             top: 34.6%;
             width: 2vh;
             height: 2vh;
           }
         }
       }

      .pos5 {
        .month-pic {
          position: absolute;
          left: 81%;
          transform: translateX(-50%) translateY(-50%);
          background-image: url("../../../../assets/images/timeline/pos5.png");
          background-size: 100% 100%;
          background-position: center;
          background-repeat: no-repeat;
          text-align: center;
          color: #ffffff;
          cursor: pointer;
        }

        .dot {
          position: absolute;
          left: 81%;
          transform: translateX(-50%) translateY(-50%);
          border-radius: 50%;
          background: #34669C;
          min-width: 20px;
          min-height: 20px;
          z-index:10;
        }

        .text-wrap {
          width: 16%;
          height: 20vh;
          position: absolute;
          transform: translateX(-50%) translateY(-50%);
          top: 35%;
          left: 89%;
          img {
            float:left;
            height: 400px;
            z-index: 1;
          }

          .item {
            margin: 10px 0;
            .title {
              padding-left: 10px;
              color: #38B5FF;
              font-weight: bold;
            }
            .detail {
              padding-left: 25px;
            }

            .title:before{
              content: "";
              display: inline-block;
              width: 9px;
              height: 11px;
              background: url("../../../../assets/images/timeline/text-before-icon-0.png");
              background-size: 100% 100%;
              background-position: center;
              background-repeat: no-repeat;
            }
          }
        }

        &.type1 {
          .month-pic {
            width: 14.4vh;
            height: 13.5vh;
            top: 13%;
            font-size: 6vh;
            line-height: 10.6vh;
          }
          .dot {
            top:22.6%;
            width: 3.7vh;
            height: 3.7vh;
          }
        }

        &.type2 {
          .month-pic {
            width: 10vh;
            height: 9.5vh;
            top: 16%;
            font-size: 4vh;
            line-height: 7.6vh;
          }
          .dot {
            top: 22.6%;
            width: 2.5vh;
            height: 2.5vh;
          }
        }

        &.type3 {
          .month-pic {
            width: 6vh;
            height: 5.7vh;
            top: 18%;
            font-size: 2.2vh;
            line-height: 5vh;
          }
          .dot {
            top: 22.6%;
            width: 2vh;
            height: 2vh;
          }
        }
      }
    }
  }

  nz-select {
    width: 150px;
  }

  .ant-card {
    width: 100%;
  }

  ::ng-deep .ant-timeline-item-tail {
    top:0;
  }

  ::ng-deep .ant-timeline-item-head {
    top: 89px;
  }

  .table-wrap {
    height: calc(100vh - 120px);
    overflow-y: auto;
  }
}
